function $(id){
  return document.getElementById(id);
}
//队列
const queue = {
  list:['10','20'],
  leftAdd:function(it){
    this.list.unshift(it);
    this.init();
  },
  leftDel:function(){
    if(this.list.length<1){
      alert('请先添加数字');
      return;
    }
    alert('您要删除的是左边第一个：' + this.list[0]);
    this.list.shift();
    this.init();
  },
  rightAdd:function(it){
   this.list.push(it);
   this.init();
  },
  rightDel:function(){
    if(this.list.length<1){
      alert('请先添加数字');
      return;
    }
   let i= this.list.length -1;
   alert('您要删除的是右边第一个：' + this.list[i]);
   this.list.pop();
   this.init();
  },
  clickDel:function(e){
    let i = this.list.indexOf(e);
    this.list.splice(i,1);
    this.render();
  },
  render:function(){
    let html = '';
    this.list.forEach(item => {
      html += `<div style="margin-right:5px;background:red;height:40px;width:40px;text-align:center;float:left;line-height:40px;color:#ffffff;">${item}</div>`
    });
    $('content').innerHTML = html;
  },
  init:function(){
    this.render();
  }
}
// 4个按钮点击事件
function btnClick(e){
    if(e.target.nodeName.toLowerCase() == 'button'){
      console.log(e.target.innerText);
      let val = $('textNum').value.trim();
      switch(e.target.innerText){
       case '左侧入':
        if(!val){
          alert('输入不能为空');
          return;
        }
        queue.leftAdd(val);
       break;
       case '左侧出':
        queue.leftDel();
       break;
       case '右侧入':
        if(!val){
          alert('输入不能为空');
          return;
        }
        queue.rightAdd(val);
       break;
       case '右侧出':
        queue.rightDel(val);
       break;
      }
    }
}
function numClick(e){
    if(e.target.nodeName.toLowerCase() == 'div'){
        queue.clickDel(e.target.innerText);
    }
}
$('btn').addEventListener('click',btnClick,false);
$('content').addEventListener('click',numClick,false);
queue.init();